<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <!--
        动态组件以及v-once


        -->
    <div class="app">
        <!-- 动态组件 
            动态组件component里面有个:is属性与子模板名字child-one，child-two挂钩，
            即当：is='child-one'时其整体就===<child-one></child-one>
            当 ：is='child-two'时其整体就===<child-two></child-two>
            当切换is中的值时，就可以动态的切换组件，切换的底层原理是，另一个被销毁，一个被渲染
            当业务需求需要经常切换时，这样显然有些耗费性能，
            故引入了v-once指令；
            v-once：如果来回切换的组件内容都一样，不需要重新渲染，也就是说带有v-once指令时，
            该组件只渲染一次就放到内存中了，下次显示时不是重新渲染而是直接从内存中获取即可；
            v-once 可以有效的提高静态组件的展示效率；
            注意：v-once中如果有数据变化慎用；；
        -->
        <component :is='type'></component>
        <!--   <child-one v-if="type==='child-one'"></child-one>
        <child-two v-if="type==='child-two'"></child-two> -->
        <button @click="handlebtnclick">change</button>
    </div>
    <script type="text/javascript">
    Vue.component("child-one", {
        template: "<div v-once>child-one</div>",
    });
    Vue.component("child-two", {
        template: "<div v-once>child-two</div>",
    });
    var vm = new Vue({
        el: ".app",
        data: {
            type: "child-one",
        },
        methods: {
            handlebtnclick: function() {
                this.type = (this.type === 'child-one' ? "child-two" : "child-one")；//三元表达式
            }
        }
    });
    </script>
</body>

</html>